<!--
 * @Description: 
 * @Author: gphper
 * @Date: 2021-09-26 19:47:26
-->
{{define "head"}}
<link href="/statics/css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
{{end}}


{{define "body"}}
<div class="container" style="margin-top: 10px;">
<div class="row">
    <div class="col-sm-8">
        <div role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">STRING:</div>
                  </div>
                  <input type="text" name="key" class="form-control" value="{{.key}}" disabled>
            </div>
        </div>
    </div>

    <div class="col-sm-4" data-toggle="modal" data-target="#exampleModal">
        <div role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">TTL:</div>
                  </div>
                  <input type="text" name="key" class="form-control" value="{{.time}}" disabled>
            </div>
        </div>
    </div>

    <div class="col-sm-12" style="margin-top: 10px;padding: 0px;">
      <form action="/string/save" method="post" class="ajaxForm" autocomplete="off">
        <input type="hidden" name="key" value="{{.key}}">
        <div class="col-sm-12" style="margin-top: 10px;">
          <button type="submit" class="btn btn-primary">保存</button>
          <button type="button" id="seeBtn" class="btn btn-primary">查看JSON格式</button>
        </div>

        <div class="col-sm-12" style="margin-top: 10px;">
            <div class="form-group">
                <textarea name="content" class="form-control" id="exampleFormControlTextarea1">{{.value}}</textarea>
              </div>
        </div>
      </form>
    </div>
</div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">设置键的TTL</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="/string/ttl" method="post" class="ajaxForm" autocomplete="off">
        <div class="modal-body">
            <div class="form-group">
              <label>新的TTL(-1 表示永不过期)</label>
              <input type="text" name="ttl" class="form-control" required>
              <input type="hidden" name="key" value="{{.key}}">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
      </div>
    </div>
  </div>


  <div class="modal fade" id="showJson" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">显示json</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="" method="post" class="ajaxForm" autocomplete="off">
        <div class="modal-body">
          <pre id="json-renderer"></pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <!-- <button type="submit" class="btn btn-primary">保存</button> -->
        </div>
      </form>
      </div>
    </div>
  </div>

{{end}}


{{define "script"}}
<script src="/statics/js/jquery.json-viewer.js"></script>
<script type="text/javascript">
$("#seeBtn").click(function(){
  
  var options = {
		  collapsed: false,
		  withQuotes: false
	};

  try{
    var input = eval('(' + $("#exampleFormControlTextarea1").val() + ')');
  }catch(err){
    layer.msg('json格式错误', {icon: 2, shade: 0.3, time: 2000});
    return false;
  }
  $("#showJson").modal("show");
  $("#json-renderer").jsonViewer(input, options);
})
</script>

<script type="text/javascript">
$("#exampleFormControlTextarea1").attr('style','height:'+($(window).height() - $("#exampleFormControlTextarea1").offset().top - 80)+'px;resize:none;');
</script>

{{end}}